<template>
	<div class="staffManage">
		<el-row class="row-bg" justify="space-between">
			<el-col :span="6">
				<el-input
					v-model="staffName"
					size="large"
					placeholder="请输入员工姓名"
					:prefix-icon="Search"
					@keyup.enter="getTableData" />
			</el-col>

			<el-col :span="2">
				<el-button type="primary" size="large" :icon="Plus" @click="addStaff">添加员工</el-button>
			</el-col>
		</el-row>

		<el-table :data="tableData" style="width: 100%; margin-top: 20px">
			<el-table-column prop="name" label="员工姓名" align="center" />
			<el-table-column prop="username" label="账号" align="center" />
			<el-table-column prop="phone" label="手机号" align="center" />
			<el-table-column prop="status" label="账号状态" align="center">
				<template #default="{ row }">
					{{ row.status === 1 ? '正常' : '禁用' }}
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="操作" width="120">
				<template #default="{ row }">
					<el-button link style="color: dodgerblue" @click="editStaff(row)">编辑</el-button>
					<el-button link style="color: red" @click="changeStatus(row)">{{ row.status === 1 ? '禁用' : '启用' }}</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			v-model:current-page="state.pageNum"
			v-model:page-size="state.pageSize"
			:page-sizes="[10, 20, 30, 40, 50]"
			layout="total, sizes, prev, pager, next, jumper"
			:total="state.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange" />
	</div>
</template>

<script lang="ts" setup name="StaffManage">
	import { reactive, toRefs, onMounted } from 'vue'
	import { Search, Plus } from '@element-plus/icons-vue'
	import { IuserInfo } from '@/types/index'
	import { useRouter } from 'vue-router'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { page, updateEmployee } from '@/api/index'

	const router = useRouter()

	interface Istate {
		staffName: string
		tableData: IuserInfo[]
		pageNum: number
		pageSize: number
		total: number
	}

	const state: Istate = reactive({
		// 员工姓名
		staffName: '',
		tableData: [],
		pageNum: 1,
		pageSize: 10,
		total: 0
	})

	const { staffName, tableData } = toRefs(state)

	onMounted(() => {
		getTableData()
	})

	/**
	 * 获取table列表数据
	 */
	const getTableData = async () => {
		try {
			const params = {
				pageNum: state.pageNum,
				pageSize: state.pageSize,
				name: state.staffName
			}
			// 进行数据解构，并进行解构的类型约束
			const { data } = await page<{ records: IuserInfo[]; total: number }>(params)
			state.tableData = data.records
			state.total = data.total
		} catch (error) {
			ElMessage.error(error as string)
		}
	}

	/**
	 * 显示条数变化事件
	 * @param size 当前每页显示条数
	 */
	const handleSizeChange = (size: number) => {
		state.pageSize = size
		getTableData()
	}

	/**
	 * 页码值变化事件
	 * @param num 当前页码值
	 */
	const handleCurrentChange = (num: number) => {
		state.pageNum = num
		getTableData()
	}

	/**
	 * 列表启用禁用按钮点击事件
	 * @param row 当前点击行的用户信息
	 */
	const changeStatus = (row: IuserInfo) => {
		ElMessageBox.confirm('是否确认调整该账号的状态', '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(async () => {
				try {
					const params = {...row, status: row.status === 1 ? 0 : 1}
					const res = await updateEmployee<string>(params)
					row.status = row.status === 1 ? 0 : 1
					ElMessage({
						type: 'success',
						message: res.data
					})
				} catch (error) {
					ElMessage.error(error as string)
				}
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消'
				})
			})
	}

	// 添加员工
	const addStaff = () => {
		router.push({ path: '/staffInfo', query: { type: 'add' } })
	}

	/**
	 * 修改用户信息
	 * @param row 当前点击的用户信息
	 */
	const editStaff = (row: IuserInfo) => {
		router.push({ path: '/staffInfo', query: { type: 'edit', userInfo: JSON.stringify(row) } })
	}
</script>

<style lang="scss" scoped>
	.staffManage {
		width: 100%;
		height: 100%;
		background: #fff;
		padding: 20px;

		.el-input {
			width: 200px;
		}

		.el-button--primary {
			color: #333333;
			background-color: #ffc200;
			border-color: #ffc200;
		}
	}
</style>
